<template>
  <div class="sale-info" v-if="!isShow">
    <nut-table
        :columns="state.columns"
        :data="state.tableData"
        :striped="true"
    />
    <nut-grid :column-num="3" class="mt-5">
      <nut-grid-item
          v-for="item in Object.keys(total)"
          :key="item"
          :text="total[item]"
          class="text-[red] font-bold"
      >
        {{ TOTAL_NAME[item] ?  TOTAL_NAME[item] : '0' }}
      </nut-grid-item>
    </nut-grid>
    <div class="m-4">
      <div class="text-[red]">备注</div>
      <nut-textarea placeholder="请输入" max-length="200" v-model="state.remark"/>
    </div>
  </div>
  <nut-sticky :bottom="0" position="bottom" class="w-full" v-if="!isShow">
    <nut-button
        class="bottom"
        shape="square"
        type="primary"
        @click="onScanSocks"
    >
      扫一扫
    </nut-button>
    <nut-button  class="bottom" shape="square" :loading="loading" @click="onSave">保存</nut-button>
  </nut-sticky>
  <QrcodeReader v-if="isShow" @back="onBack"/>
</template>

<script lang="tsx" setup>
import {computed, h, reactive, ref} from "vue";
import {Button, InputNumber, showToast} from "@nutui/nutui";
import request from "@/utils/request";
import API from "@/api/socket"
import QrcodeReader from "@/components/common/QrcodeReader.vue";
import {Del} from "@nutui/icons-vue";

const isShow = ref(false)
const loading = ref(false)
const STYLE_HEAD = 'font-size:14px;color:red;'
const STYLE_Column = 'font-size:14px;color:blue;margin-bottom: 48px;'
const SPECIAL_STYLE_Column = 'font-size:10px;color:blue;margin-bottom: 16px;'

const state = reactive({
  pagination: {
    currentPage: 1,
    total: 0,
  },
  columns: [
    {
      title: '名称',
      key: 'name',
      stylehead: STYLE_HEAD,
      stylecolumn: STYLE_Column
    },
    {
      title: '数量',
      key: 'salesNumber1',
      render: (record) => {
        return <InputNumber v-model={record.salesNumber} size="large"/>
      },
      stylehead: STYLE_HEAD,
      stylecolumn: SPECIAL_STYLE_Column
    },
    {
      title: '价格',
      key: 'suggestedSellingPrice',
      stylehead: STYLE_HEAD,
      stylecolumn: STYLE_Column
    },
    {
      title: '成本',
      key: 'costPrice',
      stylehead: STYLE_HEAD,
      stylecolumn: STYLE_Column
    },
    {
      title: '编辑',
      key: 'render',
      render: (data) => {
          return h(
              Button,
              {
                onClick: ()=> onRemove(data),
                type: 'primary',
              },
              () => h(Del,{color: '#ffffff'}),
          )
      },
      stylehead: STYLE_HEAD,
      stylecolumn: STYLE_Column
    },
  ],
  tableData: [
    {
      name: '33',
      suggestedSellingPrice: '1',
      costPrice: 2,
      salesNumber: 4
    }
  ],
  remark: '',
})

const TOTAL_NAME = {
  totalSale: '总售价',
  totalNum: '总数量',
  totalCost: '总成本'
}
const total = computed(()=> {
  let allTotal = {
    totalSale: 0,
    totalNum: 0,
    totalCost: 0
  }
  state.tableData.forEach((item: any)=> {
    allTotal.totalSale += item.suggestedSellingPrice * item.salesNumber
    allTotal.totalNum += item.salesNumber * 1
    allTotal.totalCost += item.costPrice * item.salesNumber
  })
  return allTotal
})

const onRemove = (row: any) => {
  state.tableData = state.tableData.filter((item: any) => item.id !== row.id)
}

const onSave = () => {
  if (!state.tableData?.length) return
  loading.value = true;
  const params = state.tableData.map((item: any) => {
    return {
      salesNumber: item.salesNumber,
      socksId: item.id,
      transactionPrice: item.suggestedSellingPrice
    }
  })
  request({
    url: API.saveSaleOrder,
    method:'post',
    data: {
      orderItemList: params,
            common: state.remark
          }
  }).then((res: any) => {
    if (res.code === 200) {
      showToast.success('操作成功!')
      state.tableData = []
      state.remark = ''
    }
  }).catch((e)=> {
    console.log("保存订单=》", e)
  }).finally(()=> {
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  })
}
const onBack = (data: any) => {
  isShow.value = false
  if (!data?.id) return
  const findData = state.tableData.find((item: any) => item.id === data.id)
  if (!findData) {
    state.tableData = [...state.tableData, {salesNumber: 1,...data}]
  } else {
    state.tableData.forEach((item: any) => {
      return {
        ...item,
        salesNumber: ++item.salesNumber
      }
    })
  }
}

const onScanSocks = () => {
  isShow.value = true
}

</script>

<style scoped lang="scss">
.sale-info {
  height: calc(100vh - 50px);
  @apply bg-white
}
:deep(.bottom.nut-button) {
  width: 50%;
  height: 50px;
  position: relative;
  bottom: 0;
}

</style>
